What does the :checked pseudo-class do?

Understanding the :checked Pseudo-Class

The :checked pseudo-class in CSS targets form elements that are currently checked. This includes <input> elements of type checkbox or radio, and <option> elements in a <select> dropdown. It allows you to style elements based on their selected state without using JavaScript.

Example: Using :checked

In this example, checkboxes, radio buttons, and selected dropdown options are styled differently when they are checked or selected, providing visual feedback to the user.

Best Practices

Use :checked to style selected form elements without extra classes or JavaScript.
Combine with sibling selectors (+, ~) to style related elements based on selection.
Ensure visual feedback is clear for accessibility, including color contrast and focus indicators.
Test behavior across browsers, as form styling can vary slightly.

Question Loading...

Transformation and Transition

Frameworks

Everything else

What does the :checked pseudo-class do?

Understanding the :checked Pseudo-Class

Example: Using :checked

In this example, checkboxes, radio buttons, and selected dropdown options are styled differently when they are checked or selected, providing visual feedback to the user.

Best Practices

Use :checked to style selected form elements without extra classes or JavaScript.
Combine with sibling selectors (+, ~) to style related elements based on selection.
Ensure visual feedback is clear for accessibility, including color contrast and focus indicators.
Test behavior across browsers, as form styling can vary slightly.